<template>
    <div class="diseaselist">
        <Row class="tt-row">
            <Col :xs="24">
                <div class="margin-up-down">
                    <Button @click="add" type='info' class="abs-right">
                        <i class = "iconfont icon-add" style="font-size:14px;margin-right:5px"></i>
                    </Button>
                </div>
                <div class="margin-up-down">
                    <Input class="w-input" v-model="searchKey" placeholder="菜单名称"/>
                    <Button type="primary" @click="loadPage(1)">
                        <Icon type="ios-search" size="14"/>
                    </Button>
                </div>           
            </Col>
        </Row>
        <Table class="m-table" stripe :columns="columns" :data="dataList"></Table>
        <div class="page">
            <Page :total="count" :current='pageNo' :page-size="pageSize" show-total show-elevator @on-change="loadPage"/>
        </div>
    </div>
</template>
<script>
import api from "@/api/commonApi";
export default {
    data() {
        return {
            searchKey: "",
            columns: [
                { title: "排序", key: "iNum", align: "center", width: 100,
                    render: (h, params) => {
                        let iNum = (this.pageNo-1)*this.pageSize + params.index +1;
                        return h("span", iNum);
                    }
                },
                {
                    title: "名称",
                    key: "menuName",
                    align: "center",
                    width: 220
                },
                {
                    title: "路径",
                    key: "webPath",
                    align: "center",
                    width: 300,
                    render: (h, params) => {
                        let webPath = params.row.webPath;
                        let text = "无";
                        if (webPath) {
                            text = webPath;
                        }
                        return [
                            h("span", {
                                domProps: {
                                    innerHTML: text
                                }
                            })
                        ];
                    }
                },
                {
                    title: "备注",
                    key: "remark",
                    align: "center",
                    // width: 250
                },
                {
                    title: "层级",
                    key: "level",
                    align: "center",
                    width: 100
                },
                {
                    title: "类型",
                    key: "function",
                    align: "center",
                    width: 120,
                    render: (h, params) => {
                        let func = params.row.function;
                        let text = "菜单";
                        if (func == 2) {
                            text = "功能";
                        }
                        return [
                            h("span", {
                                domProps: {
                                    innerHTML: text
                                }
                            })
                        ];
                    }
                },
                {
                    title: "设置",
                    key: "operate",
                    align: "center",
                    width: 120,
                   // fixed: 'right',
                    render: (h, params) => {
                        let id = params.row.id;
                        let func = params.row.function;
                        let level = params.row.level;
                        return [
                            h(
                                "span",
                                {
                                    attrs: {
                                        href: "javascript:void(0);"
                                    },
                                    style: {
                                        color: " #5362e1",             
                                    },
                                    on: {
                                        click: () => {
                                            //   公用方法
                                            this.functionJS.queryNavgationTo(
                                                this,
                                                "/index/configuration/menuManagement/edit",
                                                {
                                                    id,
                                                    func: func,
                                                    level,
                                                    pageNo: this.pageNo,
                                                    searchKey: this.searchKey
                                                }
                                            );
                                        }
                                    }
                                },
                                "编辑"
                            )
                        ];
                    }
                }
            ],
            dataList: [
                {
                    iNum: 1,
                    menuName: "健康资讯管理",
                    parentName: "运营平台--医生端",
                    path: "sdf/sadf/sadf",
                    level: 3,
                    remark: "这个的备注",
                    function: 1
                }
            ],
            count: 0,
            pageSize: 10,
            pageNo: 1
        };
    },
    created() {
        this.searchKey = this.$route.query.searchKey
            ? this.$route.query.searchKey
            : "";
        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "/index/configuration/admin/user/list",
                title: "帐号权限配置"
            },
            {
                path: "/index/configuration/menuManagement/list",
                title: "运营菜单配置"
            }
        ];
        this.$emit("changeBreadList", breadList);
    },
    mounted() {
        let pageNo = this.$route.query.pageNo
            ? parseInt(this.$route.query.pageNo)
            : 1;
        //上来就加载第一页数据
        this.loadPage(pageNo);
    },
    methods: {
        //运营菜单配置-分页列表
        loadPage(pageNo) {
            this.pageNo = parseInt(pageNo);
            var params = {};
            params.searchKey = this.searchKey.trim();
            params.pageNo = pageNo;
            params.pageSize = this.pageSize;
            this.$axios
                .post(api.findORMenuList, params)
                .then(resp => {
                    if (resp.data.success) {
                        this.count = resp.data.object.total;
                        this.dataList = resp.data.object.records;
                        for (let i = 0; i < this.dataList.length; i++) {
                            let item = this.dataList[i];
                            this.dataList[i].iNum = i + 1;
                        }
                    } else {
                        this.$Message.info("不允许访问");
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        add() {
            //   公用方法
            this.functionJS.queryNavgationTo(
                this,
                "/index/configuration/menuManagement/edit",
                {
                    pageNo: this.pageNo
                }
            );
        }
    }
};
</script>
<style lang="less" scoped>
.diseaselist {
    padding: 10px;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
    .margin-up-down {
        display: inline-block;
        margin: 10px 0;
    }
    .w-select {
        width: 100px;
    }
    .w-input {
        width: 200px;
    }
    .m-table {
        margin: 10px 0;
    }
    .page{
      text-align: center;
      margin: 20px 0;
    }
}
</style>